﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">

    <title>鼠标点击按钮呈现水波扩散效果</title>

    <link href="css/style.css" type="text/css" rel="stylesheet" />

</head>

<body>
    <h1>扁平风格css3按钮</h1>

    <section class="container">
        <div class="material-design" data-color="#d2181c">Press me!</div>
        <button class="btn color-2 material-design" data-color="#004740">Press me!</button>
        <button class="btn color-3 material-design" data-color="#f34711">Press me!</button>
        <button class="btn color-4 material-design" data-color="#d2181c">Press me!</button>
        <button class="btn btn-round color-1 material-design" data-color="#ffffff">Senden</button>
        <button class="btn btn-round color-2 material-design" data-color="#ffffff">Senden</button>
        <button class="btn btn-round color-3 material-design" data-color="#ffffff">Senden</button>
        <button class="btn btn-round color-4 material-design" data-color="#ffffff">Senden</button>
        <button class="btn btn-border color-1 material-design" data-color="#2f5398">Senden</button>
        <button class="btn btn-border color-2 material-design" data-color="#004740">Senden</button>
        <button class="btn btn-border color-3 material-design" data-color="#f34711">Senden</button>
        <button class="btn btn-border color-4 material-design" data-color="#d2181c">Senden</button>
        <button class="btn btn-border btn-round color-1 material-design" data-color="#426FC5">Senden</button>
        <button class="btn btn-border btn-round color-2 material-design" data-color="#00897b">Senden</button>
        <button class="btn btn-border btn-round color-3 material-design" data-color="#f6774f">Senden</button>
        <button class="btn btn-border btn-round color-4 material-design" data-color="#e94043">Senden</button>
    </section>

    <script type="text/javascript" src="js/script.js"></script>

</body>

</html>